<template>
	<view>
		<view class="" v-if="is_information" style="background-color: #fff;">
			<view class="bang_mark">

			</view>
			<view class="bang_mark1" style="background-color: #fff;">
				<view class="p2 w800 bb">
					<text class="" style="color: #000;">{{name}}</text>
				</view>
				<view class="" style="padding: 0 80rpx 30rpx 80rpx;">

					<view v-if="force_face==1" class="t_c margin_top">
						<button @click="on_img(0)" style="position:  relative;" class="flex j-c a-c bg-white"
							type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
							<image v-if="face" :src="face" class="refreshIcon"></image>
							<image v-if="!face" src="../../static/icon/face.png" class="refreshIcon"></image>
							<view class="w800 q_y"
								style="position:  absolute;top:0px;color: #FFA500;margin-left: 0rpx;">
								<text class="bicon" style="font-size: 50rpx;">&#xe665;</text>
							</view>
						</button>
					</view>

					<view v-if="force_face==1" class="margin_top">
						<bmInput bicon="&#xe61c;" type="nickname" style="color: #000;" v-model="nickname"
							:name_val="nickname" placeholder="请输入昵称"></bmInput>
					</view>

					<!-- #ifndef MP-WEIXIN -->
					<view v-if="force_tel==1" class="margin_top">
						<bmInput bicon="&#xe67b;" v-model="phone" style="color: #000;" placeholder="请输入手机号"></bmInput>
					</view>
					<view class="margin_top" v-if="settings.sms_img_code==1 && force_tel==1">
						<bmInput @get_imgCode='get_imgCode' bicon="&#xe67a;" style="color: #000;" v-model="v_code"
							placeholder="请输入图形验证码" :codeimg="settings.code_img_rand"></bmInput>
					</view>
					<view v-if="force_tel==1" class="margin_top">
						<bmInput @getCode='getCheckNum' style="color: #000;" bicon="&#xe67a;" v-model="checknum"
							placeholder="请输入短信验证码" :tips="codetime"></bmInput>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<template v-if="plugin_set.wx_login_sms==0&&force_tel==1">
						<view class="margin_top">
							<bmInput style="color: #000;" bicon="&#xe67b;" v-model="phone" placeholder="请输入手机号">
							</bmInput>
						</view>
						<view class="margin_top" v-if="settings.sms_img_code==1  ">
							<bmInput style="color: #000;" @get_imgCode='get_imgCode' bicon="&#xe67a;" v-model="v_code"
								placeholder="请输入图形验证码" :codeimg="settings.code_img_rand"></bmInput>
						</view>
						<view class="margin_top">
							<bmInput style="color: #000;" @getCode='getCheckNum' bicon="&#xe67a;" v-model="checknum"
								placeholder="请输入短信验证码" :tips="codetime"></bmInput>
						</view>
					</template>

					<template v-if="plugin_set.wx_login_sms==1">
						<view v-if="force_tel==1" class="flex j-c margin_top">
							<button class="flex by1 j-c a-c"
								style="background-color: #17D46B;width: 100%;height: 80rpx;" open-type="getPhoneNumber"
								@getphonenumber="getPhoneNumber">
								<text class="f30 " style="color: #000;">{{set_tel}}</text>
							</button>
						</view>
					</template>

					<!-- #endif -->

					<view class="flex  j-c margin_top">
						<button @click="on_ajax" class="flex a-c j-c by1"
							style=" background-color: #3D7EFF;width:100%;height: 80rpx;">
							<text class="q_y cff f30">提交</text>
						</button>
					</view>
				</view>

			</view>
			<lclipper v-if="show" :image-url="imageUrl" @success="ok_img" @cancel="show = false" />
		</view>

	</view>
</template>

<script>
	import lclipper from "@/pages/banmi/component/l-clipper/l-clipper.vue";
	import bmInput from './component/bm_input.vue'

	export default {
		name: 'bind_login',
		props: {
			is_information: {
				type: Boolean,
				default: false
			},
		},
		components: {
			bmInput,
			lclipper,
		},
		data() {
			return {
				windowHeight: 'height:600px',
				status: true,
				checknum: '',
				phone: '',
				show: false,
				flag: false,
				codetime: '获取验证码',
				resultData: {},
				password: '',
				nickname: '',
				name: '',
				account: '',
				tips: '',
				face: '',
				isty: false,
				v_univerifyStyle: {
					"fullScreen": "false", // 是否全屏显示，默认值： "false"
					"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
					"backgroundImage": "", // 全屏显示的背景图片，默认值："" （仅支持本地图片，只有全屏显示时支持）  
					"icon": {
						"path": "static/200.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo   
					},
					"phoneNum": {
						"color": "#202020" // 手机号文字颜色 默认值：#202020  
					},
					"slogan": {
						"color": "#BBBBBB" //  slogan 字体颜色 默认值：#BBBBBB  
					},
					"authButton": {
						"normalColor": "#FFD943", // 授权按钮正常状态背景颜色 默认值：#3479f5  
						"highlightColor": "#FFD943", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）  
						"disabledColor": "#FFD943", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）  
						"textColor": "#000000", // 授权按钮文字颜色 默认值：#ffffff  
						"title": "本机号码一键绑定", // 授权按钮文案 默认值：“本机号码一键登录”  
						"borderRadius": "24px" // 授权按钮圆角 默认值："24px" （按钮高度的一半）
					},
					"otherLoginButton": {
						"visible": "false", // 是否显示其他登录按钮，默认值：true  
						"normalColor": "", // 其他登录按钮正常状态背景颜色 默认值：透明 
						"highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值：透明 
						"textColor": "#656565", // 其他登录按钮文字颜色 默认值：#656565  
						"title": "账号密码登录", // 其他登录方式按钮文字 默认值：“其他登录方式”  
						"borderColor": "", //边框颜色 默认值：透明（仅iOS支持）  
						"borderRadius": "0px" // 其他登录按钮圆角 默认值："24px" （按钮高度的一半）
					},
					"privacyTerms": {
						"defaultCheckBoxState": "false", // 条款勾选框初始状态 默认值： true  
						"checkBoxSize": 20,
						"textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB  
						"termsColor": "#ef8200", //  协议文字颜色 默认值： #5496E3  
						"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”  
						"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”  
						"privacyItems": [
							// 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效  
							{
								"url": 'https://www.banmiquan.com/10/', // 点击跳转的协议详情页面  
								"title": "用户服务协议" // 协议名称  
							},
							{
								"url": 'https://www.banmiquan.com/11/', // 点击跳转的协议详情页面  
								"title": "隐私政策" // 协议名称  
							}

						]
					}

				},
				code_img_a: '',
				sms_img_code: 0,
				v_code: '',
				set_tel: '授权手机号',
				force_tel: 0,
				force_face: 0,
				imageUrl: '',
				settings: {},
				encryptedData: '',
				plugin_set: {}
			}
		},
		methods: {
			zi_init(user, settings, plugin_set) {
  
				this.settings = settings;
				this.plugin_set = plugin_set;

				this.v_id = this.settings.v_id;
				this.reg_token =user.reg_token
				this.token = user.banmi_token
				console.log("this.token: " + JSON.stringify(this.token));
 
				this.user = user
				this.iv = '';
				this.account = user.account;
				this.password = user.password;
				this.news_password = user.news_password;
				var is_face = this.user.face.indexOf("http") != -1;
				if (!is_face) {
					if (this.user.face) {
						this.face = this.user.img_url + this.user.face;
					} else {
						this.face = '';
					}
				} else {
					this.face = this.user.face;
				}


				this.app_wx_code = this.user.wx_code;
				if (this.user.nickname) {
					this.nickname = this.user.nickname
				}
				this.face1 = this.user.face;
				 
				if (this.user.tel) { //已有手机号 不需要再绑定手机号
					this.force_tel = 0;
				} else {
					this.force_tel = this.user.force_tel;
				}


				this.force_face = this.user.force_face;
				if (this.force_face == 1) {
					this.name = '设置基本信息';
				} else {
					this.name = '绑定手机号';
				}
				this.get_imgCode();

				// #ifdef MP-WEIXIN
				this.getCode_wx();
				// #endif
			},
			getCode_wx() {
				this.Banmikeji.mp_wx_code().then(ret => {
					this.wx_code = ret;
				})
			},
			getPhoneNumber(e) {
				var that = this;
				let requestParams = {
					errMsg: e.detail.errMsg,
					agr: true,
					wx_code: this.wx_code,
					banmi_token: this.token,
					bind_uid: this.user.uid
				};
				this.Banmikeji.getPhoneNumber(requestParams).then(ret => {
					this.encryptedData = e.detail.encryptedData;
					this.iv = e.detail.iv;
					this.wx_code = ret;
					this.set_tel = '已授权'
				})
			},

			onChooseavatar(e) {
				let that = this
				this.imageUrl = e.detail.avatarUrl;
				this.show = true;
			},
			ok_img(url) {
				this.show = false;
				var img_list = new Array();
				var map = {
					filepath: url.url, 
					token: this.token,
					fileType: 'image',
					suffix: 'png',
					width: 200,
					height: 200,
					duration: 0,
				};
				img_list.push(map);
			 
				this.Bmupload.banmi_upload({
					files: img_list, // 必填 临时文件路径 格式: [{path: "图片地址"}]   
				}).then(res => {
					this.face = this.user.img_url + res[0];

					this.face1 = res[0];
				});
			},
			on_img() {
				var that = this;
				// #ifndef MP-WEIXIN
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						that.imageUrl = tempFilePaths[0];
						that.show = true;
					}
				});
				// #endif
			},


			get_imgCode() {
				let data = {
					code_img: this.settings.code_img,
				};
				this.Banmikeji.get_imgCode(data).then(ret => {
					this.settings.code_img_rand = ret.code_img_rand;
					this.v_id = ret.v_id;
				})
			},
			on_ajax() {
				if (this.force_face == 1) {
					if (!this.face1) {
						uni.showToast({
							title: '请上传头像',
							icon: 'error'
						})
						return
					}
					if (!this.nickname) {
						uni.showToast({
							title: '请输入昵称',
							icon: 'error'
						})
						return
					}
				}

				if (this.force_tel == 1) {
					this.toLogin();
					return
				}
				this.on_nickname(this.nickname);
			},
			on_nickname(val) {
				let that = this;
				let requestParams = {
					nickname: val,
					banmi_token: this.token,
					face: this.face1
				};
				this.nickname = val

				this.Banmikeji.edit_nickname(requestParams).then(ret => {

					if (ret != 0) {

						this.user.nickname = val;
						var data = {
							force_tel: 0,
							force_face: 0,
							img_url: ret.img_url,
							msg: '设置成功,正在跳转'
						}
						that.Banmikeji.login_ok(that.user, data, '');
						return
					}
				})
			},
			toLogin() {
				let that = this;
				// #ifdef MP-WEIXIN

				if (this.plugin_set.wx_login_sms == 1) {
					if (!this.encryptedData) {
						uni.showToast({
							title: '请授权手机号',
							icon: "none"
						});
						return;
					}

					ajax();
					return
				}
				if (this.plugin_set.wx_login_sms == 0) {
					Validation();

				}
				// #endif

				// #ifndef MP-WEIXIN
				Validation();
				// #endif
				function Validation() {
					if (!that.isPhone()) {
						uni.showToast({
							title: '请输入正确的手机号码',
							icon: "none"
						});
						return;
					}
					if (!that.iscodetime) {
						uni.showToast({
							title: '请先获取验证码',
							icon: 'none'
						});
						return;
					}

					if (!that.checknum) {
						uni.showToast({
							title: '请输入验证码',
							icon: "none"
						});
						return;
					}
					ajax();
				}

				function ajax() {

					uni.showLoading({
						title: '正在绑定中...',
						mask: true
					})
					let requestParams = {
						account: that.account,
						tel: that.phone,
						openid: that.openid,
						type: that.type,
						nickname: that.nickname,
						face: that.face1,
						encryptedData: that.encryptedData,
						iv: that.iv,
						code: that.wx_code,
						banmi_token: that.token,
						v_code: that.v_code,
						password: that.password,
						news_password: that.news_password,
						checknum: that.checknum,
						reg_token: that.reg_token,
						
					};
					that.user.nickname = that.nickname

					if (that.user.login_type == 'reg' || that.user.login_type == 'account_reg') {
						that.reg_bind(requestParams);
						return
					}
					//账号已注册绑定 
					if (that.user.login_type == 'pwa') {

						that.Banmikeji.User_pwa_tel(requestParams).then(ret => {

						})
						return
					}

					//苹果账号授权
					if (that.user.login_type == 'Apple') {
						that.Apple_bind(requestParams);
						return
					}
					//微信小程序
					if (that.user.login_type == 'openid') {
						that.mp_wx_bing(requestParams);
						return
					}
					//app微信登录
					if (that.user.login_type == 'app_openid') {
						that.app_bind(requestParams);
						return
					}
					//抖音小程序授权登录
					if (that.user.login_type == 'douyin') {
						that.mp_toutiao_bing(requestParams);
						return
					}
					//支付宝小程序授权登录
					if (that.user.login_type == 'ali') {
						that.ali_bind(requestParams)
						return
					}
					//百度小程序授权登录
					if (that.user.login_type == 'baidu') {
						that.baidu_bind(requestParams)
						return
					}
					//qq小程序授权登录
					if (that.user.login_type == 'mp_qq') {
						that.qq_login_bind(requestParams)
						return
					}
					//快手小程序授权登录
					if (that.user.login_type == 'kuaishou') {
						that.kuaishou_login_bind(requestParams)
						return
					}
					//微信公众号授权登录
					if (that.user.login_type == 'mp_openid') {
						that.wx_mp_bind(requestParams)
						return
					}

				}




			},
			wx_mp_bind(requestParams) {
				let that = this

				requestParams.code = that.user.wx_mp_code
				that.Banmikeji.h5_weixin_login(requestParams).then(ret => {

				})
			},
			kuaishou_login_bind(requestParams) {
				let that = this;
				uni.login({
					provider: 'kuaishou',
					success: function(loginRes) {
						var code = loginRes.code;
						requestParams.kuai_code = code;
						that.Banmikeji.mp_kuai_login(requestParams).then(ret => {

						})
					},
					fail: function(err) {
						uni.showToast({
							title: '授权失败',
							icon: 'error'
						})
					}
				});
			},
			Apple_bind(requestParams) {
				let that = this;
				uni.login({
					provider: 'apple',
					success: function(loginRes) {
						uni.getUserInfo({
							provider: 'apple',
							success(res) {
								var userInfo = res.userInfo;
								requestParams.userInfo = JSON.stringify(userInfo)
								that.Banmikeji.app_Apple_login(requestParams).then(ret => {

								})

							}
						})
					},
					fail: function(err) {
						uni.showToast({
							title: '授权失败',
							icon: 'error'
						})
					}
				});
			},
			reg_bind(requestParams) {
				let that = this
				that.Banmikeji.user_reg(requestParams).then(ret => {

				})
			},
			app_bind(requestParams) {
				let that = this
				requestParams.app_wx_code = this.app_wx_code;
				console.log("requestParams: " + JSON.stringify(requestParams));
				that.Banmikeji.app_wx_login(requestParams).then(ret => {

				})
			},
			baidu_bind(requestParams) {
				let that = this
				uni.getLoginCode({
					success(res) {
						var code = res.code;
						requestParams.baidu_code = code;
						that.Banmikeji.mp_baidu_login(requestParams).then(ret => {})
					},
					fail(res2) {
						uni.showToast({
							title: '授权后即可登录',
							icon: 'error'
						})
					}
				});
			},
			ali_bind(requestParams) {
				let that = this;
				my.getAuthCode({
					scopes: 'auth_base',
					success: (res) => {
						//在此处将res.authCode发送到后端 
						requestParams.ali_code = res.authCode;
						that.Banmikeji.ali_login(requestParams).then(ret => {
							setTimeout(function() {
								uni.hideLoading();
							}, 500);
							if (ret.status == 200 || ret.status == 201) {
								var data = {
									force_tel: 0,
									force_face: 0,
									img_url: ret.img_url
								}
								that.Banmikeji.login_ok(that.user, data, '');
								return
							}
							uni.showToast({
								title: ret.msg,
								icon: 'error'
							})
						})
					}
				})


			},
			qq_login_bind(requestParams) {
				let that = this;
				uni.login({
					provider: 'qq',
					success: function(loginRes) {
						let code = loginRes.code;
						requestParams.qq_code = code;
						that.Banmikeji.qq_login(requestParams).then(ret => {
							setTimeout(function() {
								uni.hideLoading();
							}, 500);
							if (ret.status == 200 || ret.status == 201) {
								var data = {
									force_tel: 0,
									force_face: 0,
									img_url: ret.img_url
								}
								that.Banmikeji.login_ok(that.user, data, '');
								return
							}
							uni.showToast({
								title: ret.msg,
								icon: 'error'
							})
						})

					},
				});
			},
			mp_toutiao_bing(requestParams) {
				let that = this;
				uni.login({
					provider: 'toutiao',
					success: function(loginRes) {
						let dou_code = loginRes.code;
						let dou_anycode = loginRes.anonymousCode;
						requestParams.dou_code = dou_code;
						requestParams.dou_anycode = dou_anycode;
						that.Banmikeji.douyin_login(requestParams).then(ret => {
							setTimeout(function() {
								uni.hideLoading();
							}, 500);
							if (ret.status == 200 || ret.status == 201) {
								var data = {
									force_tel: 0,
									force_face: 0,
									img_url: ret.img_url
								}
								that.Banmikeji.login_ok(that.user, data, '');
								return
							}
							uni.showToast({
								title: ret.msg,
								icon: 'error'
							})

						})

					},
					fail(err) {
						console.log("调用login失败:" + JSON.stringify(err));
					}
				});

			},
			mp_wx_bing(requestParams) {
				let that = this;
				this.Banmikeji.mp_wx_login(requestParams).then(
					ret => {
						this.set_tel = '重新获取手机号'
						this.encryptedData = '';
						this.getCode_wx();
					})
			},

			// app 获取手机号登录
			// toLogin1() {
			// 	uni.showLoading({
			// 		title: '获取中,请等待,如获取不到请换移动网络...'
			// 	});
			// 	var _this = this;
			// 	uni.preLogin({
			// 		provider: "univerify",
			// 		success() {
			// 			uni.hideLoading();
			// 			const univerifyManager = uni.getUniverifyManager()
			// 			// 订阅自定义按钮点击事件 
			// 			univerifyManager.login({
			// 				provider: "univerify",
			// 				univerifyStyle: _this.v_univerifyStyle,
			// 				success(res) {
			// 					_this.isface = true;
			// 					uni.showLoading({
			// 						title: '正在提交信息，请等待'
			// 					});
			// 					let loginRes = res.authResult;
			// 					if (!_this.isdenglu) {
			// 						_this.tellogin(loginRes.openid, loginRes.access_token);
			// 					}

			// 				},
			// 				fail(fres) {}
			// 			})

			// 		}

			// 	})

			// },
			// tellogin(openid, access_token) {
			// 	let requestParams = {
			// 		openid: openid,
			// 		access_token: access_token,
			// 		code: uni.getStorageSync('code'),
			// 		nickname: this.nickname,
			// 		face: this.face,
			// 		openid1: this.openid,
			// 		sex: this.sex,
			// 		unionid: this.unionid,
			// 	};

			// 	$H.post('/index.php/index/Member/univerify1',  {
			// 		token: false,
			// 		datalist: requestParams,
			// 		is_force: true,
			// 	}).then(ret => {

			// 		uni.hideLoading();
			// 		this.isdenglu = true;
			// 		uni.showToast({
			// 			title: ret.data.msg,
			// 			icon: 'none'
			// 		});
			// 		if (ret.data.status == 200 || ret.data.status == 201) {

			// 			uni.showToast({
			// 				title: ret.data.msg,
			// 				icon: 'none'
			// 			});
			// 			uni.setStorage({
			// 				key: 'token',
			// 				data: ret.data.data.user.token
			// 			});
			// 			uni.setStorage({
			// 				key: 'user_id',
			// 				data: ret.data.data.user.uid
			// 			});
			// 			uni.setStorage({
			// 				key: 'nickname',
			// 				data: ret.data.data.user.nickname
			// 			});
			// 			uni.setStorage({
			// 				key: 'face',
			// 				data: ret.data.data.user.face
			// 			});
			// 			setTimeout(function() {
			// 				uni.$emit('login', {
			// 					title: 1
			// 				});
			// 				uni.closeAuthView();
			// 				uni.redirectTo({
			// 					url: '/pages/index/fenhong'
			// 				})
			// 			}, 2000);

			// 		} else {
			// 			this.isface = false;
			// 			uni.showToast({
			// 				title: ret.data.msg,
			// 				icon: 'none'
			// 			});
			// 		}
			// 	})
			// },

			// 验证手机号码
			isPhone() {
				let mPattern = /^1[23456789]\d{9}$/;
				return mPattern.test(this.phone);
			},
			// 获取验证码
			getCheckNum() {
				if (this.codetime > 0) {
					return;
				}
				let requestParams = {
					phone: this.phone,
					account: this.account,
					v_code: this.v_code,
					id: this.v_id,
					is_agr: false,
					login_type: this.user.login_type,
					bind_uid: this.user.uid
				};
				this.Banmikeji.tel_message(requestParams).then(ret => {
					if (ret == 200) {
						this.codetime = 60;
						this.iscodetime = true;
						let timer = setInterval(() => {
							this.codetime--;
							if (this.codetime < 1) {
								clearInterval(timer);
								this.codetime = '获取验证码';
							}
						}, 1000);
					}
				})
			},



		}
	}
</script>

<style scoped>
	.margin_top {
		margin-top: 30rpx;
	}

	button {
		padding: 0;
		background-color: transparent;

	}

	button::after {
		border: none;
	}

	.bang_mark {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
		width: 750rpx;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.bang_mark1 {
		position: fixed;
		bottom: 0;
		width: 750rpx;

		background-color: #000;
		z-index: 2;
	}

	.refreshIcon {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: solid 2rpx #32CD32;
	}

	.userName {

		padding: 10rpx 10rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.weui-input {
		padding: 20rpx;
		border: solid 2rpx #32CD32;
		border-radius: 10rpx;
	}

	.inputtext {
		border-width: 5rpx !important;
		border-right-style: solid !important;
		border-left-color: #FFFFFF !important;
		border-right-color: #FFFFFF !important;
		border-bottom-color: #F4F4F4 !important;
		border-top-color: #FFFFFF !important;
	}

	.bt {
		background-color: #EEEEEE;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;

	}

	.qt_img {
		height: 80rpx;
		width: 80rpx;
		margin-right: 20rpx;
	}
</style>